<script setup>
import {ref, onMounted} from 'vue'
import {getExerciseTarget, updateExerciseTarget} from "@/api/user/commonUser.js";
import {ElMessage} from "element-plus";

// 定义响应式数据
const sportTarget = ref({})
const formRef = ref(null)
const formData = ref({})
// 获取运动目标数据
const fetchSportTarget = async () => {
  try {
    const response = await getExerciseTarget()
    // 将后端数据映射到前端结构
    sportTarget.value = response.data
  } catch (error) {
    console.error('获取运动目标失败:', error)
  }
}
//更新运动目标数据
const updateSportTarget = () => {
  updateExerciseTarget(sportTarget.value)
}
// 组件挂载时获取数据
onMounted(() => {
  fetchSportTarget()
})
const dialogVisible = ref(false);
const openDialog = () => {
  // 复制当前数据到表单数据
  formData.value = {...sportTarget.value}
  dialogVisible.value = true;
};

const saveChanges = () => {
  updateExerciseTarget(formData.value).then(() => {
        // 更新成功后同步数据到主显示
        sportTarget.value = {...formData.value}
        dialogVisible.value = false;
        ElMessage.success('目标修改成功')
      }
  ).catch((error) => {
    console.error('目标修改失败:', error)
  })
};
</script>

<template>
  <!-- 模板部分保持不变 -->
  <div class="step-grid">
    <el-text size="large" tag="h1">运动目标</el-text>
    <el-divider />
    <el-row :gutter="16" @click="openDialog">
      <el-col :xs="12" :sm="8" :md="6">
        <el-card shadow="never" class="step-card">
          <div class="card-content">
            <div class="text-section">
              <el-text class="step-label">走步</el-text>
            </div>
            <div class="number-section">
              <el-tag type="primary" effect="light" class="step-value">
                {{ sportTarget.walkStepsTarget }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6">
        <el-card shadow="never" class="step-card">
          <div class="card-content">
            <div class="text-section">
              <el-text class="step-label">深蹲</el-text>
            </div>
            <div class="number-section">
              <el-tag type="primary" effect="light" class="step-value">
                {{ sportTarget.squatTarget }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6">
        <el-card shadow="never" class="step-card">
          <div class="card-content">
            <div class="text-section">
              <el-text class="step-label">仰卧起坐</el-text>
            </div>
            <div class="number-section">
              <el-tag type="primary" effect="light" class="step-value">
                {{ sportTarget.situpTarget }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6">
        <el-card shadow="never" class="step-card">
          <div class="card-content">
            <div class="text-section">
              <el-text class="step-label">俯卧撑</el-text>
            </div>
            <div class="number-section">
              <el-tag type="primary" effect="light" class="step-value">
                {{ sportTarget.pushupTarget }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 修复弹窗部分 -->
    <el-dialog v-model="dialogVisible" title="修改运动目标" width="500px">
      <el-form :model="formData" ref="formRef" label-width="120px">
        <el-form-item label="步数目标" prop="walkStepsTarget">
          <el-input-number v-model="formData.walkStepsTarget" :min="0" label="步数目标"></el-input-number>
        </el-form-item>

        <el-form-item label="深蹲目标" prop="squatTarget">
          <el-input-number v-model="formData.squatTarget" :min="0" label="深蹲目标"></el-input-number>
        </el-form-item>

        <el-form-item label="仰卧起坐目标" prop="situpTarget">
          <el-input-number v-model="formData.situpTarget" :min="0" label="仰卧起坐目标"></el-input-number>
        </el-form-item>

        <el-form-item label="俯卧撑目标" prop="pushupTarget">
          <el-input-number v-model="formData.pushupTarget" :min="0" label="俯卧撑目标"></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveChanges">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
/* 样式部分保持不变 */
.step-grid {
  padding: 16px;
}

.step-card {
  margin-bottom: 16px;
  cursor: pointer; /* 添加指针样式表明可点击 */

  .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;

    .text-section {
      flex: 1;

      .step-label {
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }
    }

    .number-section {
      margin-left: 12px;

      .step-value {
        font-size: 16px;
        font-weight: 600;
        padding: 6px 12px;
        background-color: #ecf5ff;
        border-color: #b3d8ff;
        color: #409eff;

        :deep(.el-text) {
          font-size: inherit;
          font-weight: inherit;
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .step-card .card-content {
    min-height: 50px;

    .step-label {
      font-size: 14px !important;
    }

    .step-value {
      font-size: 14px !important;
      padding: 4px 8px !important;
    }
  }
}
</style>